<template>
    <div ref="editor"></div>
</template>

<script>
import { ref, onMounted, watch, nextTick } from 'vue';
import WangEditor from 'wangeditor';
// cookies
import { getToken } from "@/utils/cookies";  // 这是封装好的方法
export default {
    name: 'Wangeditor',
    components: {},
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    emits: ["update:value", 'callback'],
    setup(props, { emit }){
        let html = ref(null)
        // 内容
        let content = ref('');
        // 富文本DOM元素
        const editor = ref(null);
        // 富文本对象
        let editor_instance = null;
        // 生命周期
        onMounted(() => {
            nextTick(() => {
                // 创建富文本对象
                editor_instance = new WangEditor(editor.value);
                // 图片上传配置
                editor_instance.config.uploadImgServer = process.env.VUE_APP_DEV_TARGET + '/upload' // 上传图片的接口地址
                editor_instance.config.uploadFileName = 'files' // formdata中的name属性
                editor_instance.config.uploadImgHeaders = {
                    Token: getToken() // 设置请求头
                }
                editor_instance.config.uploadImgHooks = {
                    // 图片上传并返回结果，但图片插入错误时触发
                    fail: function (xhr, editor, result) {
                        console.log(result)
                    },
                    // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                    customInsert: function(insertImgFn, result) {
                        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                        insertImgFn(result.data.files_path)
                    }
                }
                // 配置change事件
                Object.assign(editor_instance.config, {
                    onchange(value) {
                        content.value = value;
                        emit("update:value", value);
                    },
                });
                // 创建
                editor_instance.create();
            })
        })
        watch(() => props.value, (newContent, oldContent) => {
            editor_instance.txt.html(newContent);
        })
        return { editor }
    }
}
</script>
<style lang='scss' scoped>
</style>